/* components */
import ChartsSearchRow from '@src/modules/report/managementReport/charts/components/common/ChartsSearch/components/ChartsSearchRow.tsx'
import ChartsSearchRowItem from '@src/modules/report/managementReport/charts/components/common/ChartsSearch/components/ChartsSearchRowItem.tsx'
import ChartRepertorySelect from '@src/modules/report/managementReport/charts/components/common/ChartsSearch/components/ChartRepertorySelect.tsx'
import ChartSparePartSelect, { ChartSparePartSelectInstance } from '@src/modules/report/managementReport/charts/components/common/ChartsSearch/components/ChartSparePartSelect.tsx'
import ChartTimePeriodSelect, { ChartTimePeriodSelectInstance } from '@src/modules/report/managementReport/charts/components/common/ChartsSearch/components/ChartTimePeriodSelect.tsx'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* scss */
/* model */
import { ChartsSearchParams, ChartsSearchTimePeriodType } from '@src/modules/report/managementReport/charts/components/common/ChartsSearch/ChartsSearchModel'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent, ComputedRef, computed , ref, Ref} from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { useChartSearch } from '@hooks/useChartSearch'

interface ChartsSearchWuZiSetupState {
  // 仓库数据变化事件
  handlerRepertoryChange: (repertory: string) => void;
  // 备件品类数据变化事件
  handlerSparePartsChange: (spareParts: string[]) => void;
  // 时间周期数据变化事件
  handlerTimePeriodChange: (timePeriod: ChartsSearchTimePeriodType) => void;
  // 仓库列表
  repertory: ComputedRef<string | undefined>;
  // 备件品类
  spareParts: ComputedRef<string[] | undefined>;
  // 备件品类选择组件
  ChartSparePartSelectComponent: Ref<ChartSparePartSelectInstance | null>;
  // 图表时间周期选择组件
  ChartTimePeriodSelectComponent: Ref<ChartTimePeriodSelectInstance | null>;
}

enum ChartsSearchWuZiEventEnum {
  Input = 'input'
}

export type ChartsSearchWuZiProps = {
  value: ChartsSearchParams;
  reportKey: string;
}
export type ChartsSearchWuZiInstance = ComponentInstance & ChartsSearchWuZiSetupState
export type ChartsSearchWuZiVM = ComponentRenderProxy<ChartsSearchWuZiProps> & CommonComponentInstance

export default defineComponent<ChartsSearchWuZiProps, ChartsSearchWuZiSetupState>({
  name: ComponentNameEnum.ChartsSearchWuZi,
  components: {
    [ComponentNameEnum.ChartsSearchRowItem]: ChartsSearchRowItem,
    [ComponentNameEnum.ChartsSearchRow]: ChartsSearchRow,
    [ComponentNameEnum.ChartRepertorySelect]: ChartRepertorySelect,
    [ComponentNameEnum.ChartSparePartSelect]: ChartSparePartSelect,
    [ComponentNameEnum.ChartTimePeriodSelect]: ChartTimePeriodSelect
  },
  props: {
    reportKey: {
      type: String,
      default: ''
    },
    value: {
      type: Object,
      default: () => new ChartsSearchParams()
    }
  },
  setup(props: ChartsSearchWuZiProps, { emit }) {
    // 备件品类选择组件
    const ChartSparePartSelectComponent: Ref<ChartSparePartSelectInstance | null> = ref(null)
    // 图表时间周期选择组件
    const ChartTimePeriodSelectComponent: Ref<ChartTimePeriodSelectInstance | null> = ref(null)

    const { handlerRepertoryChange, handlerSparePartsChange, handlerTimePeriodChange } = useChartSearch(props, emit)

    // 仓库列表
    const repertory: ComputedRef<string | undefined> = computed(() => props.value.repertoryIdList)
    //备件品类
    const spareParts: ComputedRef<string[] | undefined> = computed(() => props.value.sparepartIdList)
    return {
      handlerRepertoryChange,
      handlerSparePartsChange,
      handlerTimePeriodChange,
      repertory,
      spareParts,
      ChartSparePartSelectComponent,
      ChartTimePeriodSelectComponent
    }
  },
  render() {
    return (
      <div class="charts-search">

        {/* start 图表搜索行 */}
        <charts-search-row>

          {/* start 仓库选择 */}
          <charts-search-row-item label="仓库">
            <charts-repertory-select value={this.repertory} onInput={this.handlerRepertoryChange}>
            </charts-repertory-select>
          </charts-search-row-item>
          {/* end 仓库选择 */}

          {/* start 备件品类选择 */}
          <charts-search-row-item label="备件品类">
            <charts-spare-part-select ref="ChartSparePartSelectComponent" value={this.spareParts} repertory={this.repertory} onInput={this.handlerSparePartsChange}>
            </charts-spare-part-select>
          </charts-search-row-item>
          {/* end 备件品类选择 */}

        </charts-search-row>
        {/* end 图表搜索行 */}

        {/* start 图表搜索行 */}
        <charts-search-row>

          {/* start 时间周期选择 */}
          <charts-search-row-item label="时间周期">
            <charts-time-period-select ref="ChartTimePeriodSelectComponent" value={this.value} onInput={this.handlerTimePeriodChange}>
            </charts-time-period-select>
          </charts-search-row-item>
          {/* end 时间周期选择 */}

        </charts-search-row>

      </div>
    )
  }
})
